<template>
    <div class="pageLogin">
        <h1>欢迎来到青年旅社</h1>
        <div class="login">
            <el-form ref="form" v-bind:rules="rules" v-bind:model="form" label-width="120px">
                <el-form-item label="用户名" prop="uname">
                    <el-input v-model="form.uname" placeholder="请输入用户名" ></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="upassword">
                    <el-input show-password v-model="form.upassword" placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit" round>登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                user:{},
                form: {
                    uname:'',
                    upassword:'',
                },
                rules:{
                    uname:[
                        {required:true,message:"用户名不能为空",trigger:'blur'},
                        {pattern:/^\w{3,16}$/,message:'3~16位字符，可以包含字母、数字、下划线',trigger:'blur'}

                    ],
                    upassword:[
                        {required:true,message:"密码不能为空",trigger:'blur'},
                        {pattern:/^\w{6,16}$/,message:'6~16位字符，可以包含字母、数字、下划线',trigger:'blur'}
                    ],
                },
            }
        },
        methods:{
            onSubmit(){
                this.$refs.form.validate(valid=>{
                    if(valid){
                        this.$http.loginApi.login(this.form).then(res=>{
                            //console.log(res);
                            if(res.data.code==200){
                                this.user=res.data.data[0]
                                this.$store.commit('setUser',this.user)
                                this.$message({
                                    type:'success',
                                    message:'登录成功！'
                                })
                                this.$router.push('/home/index')
                                
                            }
                        }).catch(err=>console.log(err))
                    }else{
                        this.$notify({
                            type:'error',
                            message:'用户名密码不正确！'
                        })
                    }
                })
            }
        }
    }
</script>

<style lang="scss" >
    .pageLogin{
        background:black;
        height: 100vh;
        padding-top: 80px;
    }
    h1{
        color: #409eff;
        text-align: center;
        font-size: 50px;
    }
    .login{
        width: 500px;
        height: 300px;
        border:1px solid #409eff;
        border-radius: 10px;
        margin: 100px auto;
        >.el-form{
            >.el-form-item{
                margin:40px 18px;
            }
        }
        .el-input{
            width: 300px;
        }
        .el-button{
            width: 200px;
            height: 50px;
            font-size: 30px;
            font-weight: bold;
            margin-left:18px;
        }
        .el-form-item__label{
                color:#409eff;
                font-size: 20px;
                font-weight: bold;
        }
        
    }
</style>